<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
</head>

<body>
    <div id="app">
        <span>——————————监听事件—————————</span>
        <!-- v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 -->
        <div>
            <button @click="jishu"> 计数器 <tton>
        </div>
        <p> 你给了臭宝 {{ counter}} 个大嘴巴子 </p>
        <span>——————————事件处理方法—————————</span>
        <!-- 接收一个需要调用的方法名称。 -->
        <div>
            <!--   `greet` 是在下面定义的方法名 -->
            <button @click="greet"> greet<tton>
        </div>

        <span>————————内联处理器中的方法————————————</span>
        <div>
            <button @click="say('hi')">说 hi<tton>
                    <button @click="say('干嘛',$event)">说 在干嘛<tton>
        </div>
        <div>
            <span>——————————————按键修饰符——————————————</span><br />
            <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()`
            请键入 <input v-on:keyup.enter="enter"><br />

            <button @keyup.right.left.up.down="move">
                <div :style="s"></div>
        </div> -->

        </div>

        <script>
            let app = new Vue({
                el: "#app",
                data: {
                    counter: 0,
                    name: '什么，你居然叫马了顶大',
                },
                // 在 `methods` 对象中定义方法
                methods: {
                    jishu: function () {
                        this.counter += 1
                    },

                    greet: function (event) {
                        // `this` 在方法里指向当前 Vue 实例
                        alert("你好，" + this.name + "!")
                        // `event` 是原生 DOM 事件
                        //一个函数，自己不调用，让其他控件调用的，是回调方法
                        if (event) {
                            alert(event.target.tagName)//弹出调用控件名字
                        }
                    },
                    say: function (message, event) {
                        if (event) {
                            alert(event.preventDefault())
                        }
                        alert(message)
                    },
                    enter: function () {
                        console.log("你点击了回车！！")

                    },



                }
            })

        // 关于  也可以用 JavaScript 直接调用方法
        // app.greet()


        </script>
</body>

<ml>